<template>
  <div class="chat_wrapper">
    <div class="top">
      <div class="userinfo">
        <div class="top_avatar"  v-if="users.length > 0">
          <img class="gl_img gl_radius" :src="users.length>0?users[cur_user_index].avatar:''" alt=""> 
        </div>
        <div class="top_username"><div class="top_username_inner">{{users.length>0?users[cur_user_index].realname:''}}</div></div>
      </div>
      <el-button class="" style="display:none" type="success" @click="click">连接</el-button>

    </div>

    <div class="body">
      <template v-if="users.length > 0">
        <div class="body_left">
          <div class="user_item" v-for="(item, index) in users" :key="index" @click="selectUser(index)">
            <div class="user_avatar">
              <img class="gl_img gl_radius" :src="item.avatar" alt="">
            </div>
            <div class="user_nickname">&nbsp;&nbsp;&nbsp;{{item.realname}}</div>
          </div>
        </div>

        <div class="body_right">
          <div class="chat_content_wrapper">
            
            <div class="chat_item_wrapper" v-for="(item, index) in chat_list[cur_user_index]" :key="index">
              <div class="gl_grey_font">{{item.time}}</div>
              <div :class="!item.isDoc?'chat_left':'chat_right'">
                <div class="chat_avatar" >
                  <img class="gl_img gl_radius" :src="selectAvatar(item)?doc_avatar:item.avatar" alt=""/>
                </div>
                <div  class="chat_content" :class="!item.isDoc?'':'chat_content_right'">{{item.content}}</div> 
              </div>
            </div>


          </div>
          <div class="input_wrapper">
            <el-input class="input_area"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="input_content">
            </el-input>
            <el-button class="send_btn" type="success" @click="send" :disabled="users.length <= 0">发送</el-button>
          </div>
        </div>
      </template>
      <div v-else class="nouser_text">没有用户在线问诊</div>
    </div> <!-- body end  -->


  </div>


</template>

<script>
import {myGet, wsUrl} from '../../utils/api';
import ChatDrugItem from '../ChatDrugItem'

export default {
  
  data(){
    return {
      flag: true, 
      cur_user_index: 0, 
      chat_list: [[
        // {content: '医生说的话', avatar: '', did: 1, poid: '123456', time: '2020-11-13 11:30', isDoc: true}, 
        // {content: '用户说的话', avatar: '', did: 1, poid: '123456', time: '2020-11-13 11:30', isDoc: false}, 
      ]],
      input_content: 'asd', 
      websock: null,
      users: [], 
      doc_avatar: window.localStorage.getItem('doctor_avatar')
    }
  }, 
  components: {
    ChatDrugItem
  },
  mounted(){
    this.getOnlineUsers();
    this.click();
  },
  methods: {
    selectAvatar(item){
      if(item.isDoc){
        return true;
      }
      else {
        return false;
      }
    },
    getOnlineUsers(){
      myGet('/pet/own/online', null).then(res => {
        var myres = res.data.res
        console.debug("online users success",myres)
        this.users = myres
        this.chat_list.push([
          // {content: '医生说的话', avatar: '', did: 1, poid: '123456', time: '2020-11-13 11:30', isDoc: true}, 
          // {content: '用户说的话', avatar: '', did: 1, poid: '123456', time: '2020-11-13 11:30', isDoc: false}
        ])
      }).catch(err => {
        console.debug("online users fail", err)
      })
    },
    selectUser(index){
      this.cur_user_index = index
    },
    initWebSocket(){ //初始化weosocket
      if(this.websock != null){
        this.websock.close();
      }
      const wsuri = wsUrl + '/chat/'+ window.localStorage.getItem("doctor_id")
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.onmessage;
      this.websock.onopen = this.onopen;
      this.websock.onerror = this.onerror;
      this.websock.onclose = this.socketclose;
    },
    onopen(msg){ //连接建立之后执行send方法发送数据
      this.$message({showClose: true, message: '连接成功', type: 'success'})
      // this.send(JSON.stringify(actions));
    },
    onerror(err){//连接建立失败重连
      // this.initWebSocket();
      this.$message({showClose: true, message: '连接失败:'+JSON.stringify(err), type: 'error'})
    },
    onmessage(e){ //数据接收
      // this.$message({showClose: true, message: '接收到服务器发来的消息:'+JSON.stringify(e.data), type: 'success'})
      console.debug(JSON.stringify(e.data))
      var redata = JSON.parse(e.data);
      if(redata.type == 'link'){
        this.getOnlineUsers();
        return
      }
      //根据发来的用户的信息中的openid来获取当前在线online用户列表的index
      //"{\"content\":\"wesdf\",\"avatar\":\"\",\"did\":1,\"poid\":\"ccc\",\"time\":\"2020-11-13 11:30\",\"isDoc\":false}"
      var openid = redata.poid
      var cur_index = -1
      for(var i = 0; i < this.users.length; i++){
        if(this.users[i].openid == openid){
          cur_index = i
        }
      }
      this.chat_list[cur_index].push(redata)
    },
    send(){//数据发送
      var sendmsg = {poid: this.users[this.cur_user_index].openid, did: window.localStorage.getItem("doctor_id"), content: this.input_content, isDoc: true}
      this.websock.send(JSON.stringify(sendmsg));
      this.input_content = ''
    },
    socketclose(e){  //关闭
      console.log('断开连接',e);
    },
    click(){
      this.flag = this.flag?false:true
      this.initWebSocket()
    }
  }
}
</script>


<style scoped>
.nouser_text{
  width: 100%;
  text-align: center;
  line-height: 300px;
  color: rgb(112, 101, 101);
  font-size: 30px;
}

.send_btn{
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 3px;
  /* line-height: 30px; */
}
.input_area{
  width: 98%;
  margin: 1%;
  position: relative;
}
.user_item{
  box-shadow: burlywood 0 0 3px;
  width: 96%;
  padding: 2%;
  display: flex;
}
.user_avatar{
  width: 50px;
  height: 50px;
}
.user_nickname{
  line-height: 50px;
}

  .chat_wrapper{
    width: 70%;
    height: 700px;
    min-width: 600px;
    display: flex;
    flex-direction: column;
    box-shadow: burlywood 0 0 5px;
  }
  .top{
    height: 60px;
    display: flex;
    box-shadow: burlywood 0 0 5px;
  }
  .userinfo{
    margin: auto;
    width: 200px;
    height: 50px;
    display: flex;
  }
  .top_avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .top_username{
    height: auto;
    display: flex;
    margin-left: 10px;
    font-weight: bold;
  }
  .top_username_inner{
    margin: auto;
  }
  .body{
    flex: 1;
    display: flex;
  }

  .body_left{
    width: 200px;
    height: 100%;
    box-shadow: cadetblue 0 0 5px;
    
  }
  .body_right{
    flex: 1;
  }
  .chat_item_wrapper{
    margin: 1%;
    width: 98%;
    /* border: 2px solid black; */
    /* box-shadow: rgb(156, 151, 151) 0 0 5px; */
    height: 80px;
  }
  .chat_left{
    padding-top: 5px;
    display: flex;
    width: 98%;
    height: 100%;
    margin: 0 1% 0 1%;
    /* border: 3px solid green; */
    border-radius: 10px;
  }
  .chat_right{
    padding-top: 5px;
    margin: 0 10px 0 10px;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    width: 98%;
    margin: 0 1% 0 1%;
    
    /* border: 3px solid green; */
  }
  .chat_avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* border: 1px solid blue; */
    box-shadow: rgb(160, 143, 143) 0 0 5px;
  }
  .chat_content{
    height: 50px;
    max-width: 450px;
    line-height: 50px;
    /* border: 1px solid rgb(72, 255, 0); */
    padding: 0px 10px 0 10px;
    margin: auto 0;
    border-radius: 30px;
    margin: 0 10px 0 10px;
    box-shadow: rgb(160, 143, 143) 0 0 5px;
    overflow: hidden;
  }
  .chat_content_right{
    background-color: rgb(96, 165, 28);
    color: white;
  }
  .chat_content_wrapper{
    height: 80%;
    max-height: 550px;
    overflow: scroll;
  }
  .input_wrapper{
    height: 17%;
    width: 100%;
    box-shadow: burlywood 0 0 5px;
    position: relative;
  }


  </style>

<style>

</style>
